<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        .box1 {
            width: 100px;
            height: 100px;
            background-color: aqua;
            position: absolute;
        }
        
        .box2 {
            width: 200px;
            height: 200px;
            background-color: pink;
            position: absolute;
            left: 600px;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <script>
        // 获取元素;
        var obox1 = document.querySelector(".box1");
        var obox2 = document.querySelector(".box2");
        //  按下小框
        obox1.onmousedown = function(e) {
            // 获取鼠标按下的值
            var x = e.clientX - this.offsetLeft;
            var y = e.clientY - this.offsetTop;

            // 移动
            this.onmousemove = function(e) {
                var xx = e.clientX;
                var yy = e.clientY;
                this.style.left = xx - x + "px";
                this.style.top = yy - y + "px";
                //在移动时检测碰撞

                // 获取框的大边和小边;
                var aminx = this.offsetLeft;
                var amaxx = this.offsetLeft + this.offsetWidth;

                var bminx = obox2.offsetLeft;
                var bmaxx = obox2.offsetLeft + obox2.offsetWidth;
                if (amaxx >= bminx && aminx <= bmaxx) {
                    console.log("撞上");
                }
            };
        };
        document.onmouseup = function() {
            obox1.onmousemove = "";
        };
    </script>
</body>

</html>